﻿<!Doctype html>
<html xmlns="http://www.w3.org/1999/html">
<!---------------------------------------------------------
Auther:：Fin;  Version：Autotestplat-V2.7
----------------------------------------------------------->
<head>
    <meta charset="UTF-8">
    <title> 测试计划 </title>
    <link rel="stylesheet" href="/static/css/bootstrap.min.css">
    <link rel="stylesheet" href="/static/css/style.css" type="text/css">
    <link rel="stylesheet" href="/static/css/fileinput.min.css">
    <link href="/static/css/navbar.css" rel="stylesheet" type="text/css">
    <link rel="stylesheet" type="text/css" href="/static/css/select2.min.css" />
    <script src="/static/js/jquery.min.js"></script>
    <script src="/static/js/bootstrap.min.js"></script>
    <script src="/static/vendors/laydate/laydate.js" type="text/javascript"></script>
    <script type="text/javascript" charset="gbk" src="/static/js/fileinput.min.js"></script>
    <script src="/static/js/public.js"></script>
    <script src="/static/js/testplan.js"></script>
    <script src="/static/js/select2.min.js"></script>
    <script>
        $(document).ready(function() {
            var addRunInterval = document.querySelectorAll('select[name="add_run_interval"]')[0];
            laydate.render({
                elem: '#add_run_time',
                type: 'datetime',
                format: 'yyyy-MM-dd HH:mm',
                done: function(value){
                    if (value) {
                        addRunInterval.value='';
                        addRunInterval.readonly = true;
                    } else {
                        addRunInterval.disabled = false;
                    }
                }
            });
            var editRunInterval = document.querySelectorAll('select[name="edit_run_interval"]')[0];
            laydate.render({
                elem: '#edit_run_time',
                type: 'datetime',
                format: 'yyyy-MM-dd HH:mm',
                done: function(value){
                    if (value) {
                        editRunInterval.value='';
                        editRunInterval.readonly = true;
                    } else {
                        editRunInterval.disabled = false;
                    }
                }
            });
            var addRunTime = document.querySelectorAll('input[name="add_run_time"]')[0];
            var addRunInterval = document.querySelectorAll('select[name="add_run_interval"]')[0];
            var editRunTime = document.querySelectorAll('input[name="edit_run_time"]')[0];
            var editRunInterval = document.querySelectorAll('select[name="edit_run_interval"]')[0];
            addRunInterval.addEventListener('change', function() {
                if (this.value !== '') {
                    addRunTime.value = ''
                    addRunTime.readonly = true;
                } else {
                    addRunTime.readonly = false;
                    addRunInterval.disabled = false;
                }
            });
            editRunInterval.addEventListener('change', function() {
                if (this.value !== '') {
                    editRunTime.value = ''
                    editRunTime.readonly = true;
                } else {
                    editRunTime.readonly = false;
                    editRunInterval.disabled = false;
                }
            });

        });
    </script>
    <style>
        td {
            font-size: 12px;
        }
    </style>
    <script type="text/javascript">
        var numCount;
        var columnsCounts;
        var pageCount;
        var pageNum;
        var currPageNum;
        var blockTable;
        var preSpan;
        var firstSpan;
        var nextSpan;
        var lastSpan;
        var pageNumSpan;
        var currPageSpan;
        var numCount1;
        var columnsCounts1;
        var pageCount1;
        var pageNum1;
        var currPageNum1;
        var blockTable1;
        var preSpan1;
        var firstSpan1;
        var nextSpan1;
        var lastSpan1;
        var pageNumSpan1;
        var currPageSpan1;
        window.onload = function () {
            if(loginVerify() == 200){
                infoInit()
            }
            var selectElement = document.getElementById('select-option');
            var options = selectElement.options;
            for (var i = 0; i < options.length; i++) {
                if (options[i].text === "{{ product_name }}") {
                    options[i].style.display = 'none';
                    break;
                }
            }
            blockTable = document.getElementById("blocks");
            preSpan = document.getElementById("spanPre");
            firstSpan = document.getElementById("spanFirst");
            nextSpan = document.getElementById("spanNext");
            lastSpan = document.getElementById("spanLast");
            pageNumSpan = document.getElementById("spanTotalPage");
            currPageSpan = document.getElementById("spanPageNum");
            numCount = document.getElementById("blocks").rows.length - 1;
            columnsCounts = blockTable.rows[0].cells.length;
            pageCount = 7;
            pageNum = parseInt(numCount / pageCount);
            if (0 != numCount % pageCount) {
                pageNum += 1;
            }
            firstPage();
            blockTable1 = document.getElementById("blocks1");
            preSpan1 = document.getElementById("spanPre1");
            firstSpan1 = document.getElementById("spanFirst1");
            nextSpan1 = document.getElementById("spanNext1");
            lastSpan1 = document.getElementById("spanLast1");
            pageNumSpan1 = document.getElementById("spanTotalPage1");
            currPageSpan1 = document.getElementById("spanPageNum1");
            numCount1 = document.getElementById("blocks1").rows.length - 1;
            columnsCounts1 = blockTable1.rows[0].cells.length;
            pageCount1 = 7;
            pageNum1 = parseInt(numCount1 / pageCount1);
            if (0 != numCount1 % pageCount1) {
                pageNum1 += 1;
            }
            firstPage1();
            $(document).ready(function() {
                var checkBoxHtml = '<input type="checkbox" class="localChkAll" name="chkall" id="chkall" onclick="checkAll(this)">';
                $('#checkboxContainer').html(checkBoxHtml);
                var checkBoxEditHtml = '<input type="checkbox" class="localChkAll" name="chkeditall" id="chkeditall" onclick="checkEditAll(this)" checked>';
                $('#checkboxEditPage').html(checkBoxEditHtml);
            });
            firstSpan.addEventListener("click", function() {
                var checkBoxHtml = '<input type="checkbox" class="localChkAll" name="chkall" id="chkall" onclick="checkAll(this)">';
                $('#checkboxContainer').html(checkBoxHtml);
                setTimeout(function() {
                    checkPage(this);
                }, 100);
            });
            preSpan.addEventListener("click", function() {
                var checkBoxHtml = '<input type="checkbox" class="localChkAll" name="chkall" id="chkall" onclick="checkAll(this)">';
                $('#checkboxContainer').html(checkBoxHtml);
                setTimeout(function() {
                    checkPage(this);
                }, 100);
            });
            nextSpan.addEventListener("click", function() {
                var checkBoxHtml = '<input type="checkbox" class="localChkAll" name="chkall" id="chkall" onclick="checkAll(this)">';
                $('#checkboxContainer').html(checkBoxHtml);
                setTimeout(function() {
                    checkPage(this);
                }, 100);
            });
            lastSpan.addEventListener("click", function() {
                var checkBoxHtml = '<input type="checkbox" class="localChkAll" name="chkall" id="chkall" onclick="checkAll(this)">';
                $('#checkboxContainer').html(checkBoxHtml);
                setTimeout(function() {
                    checkPage(this);
                }, 100);
            });

            var fieldValues = document.querySelectorAll('td[name="ids"]');
            for (let i = 0; i < fieldValues.length; i++) {
                $.ajax({
                        url: appURL+getProgressURL+fieldValues[i].innerHTML+'/',
                        type: 'POST',
                        data: {
                              suit_id: fieldValues[i].innerHTML
                        },
                        success: (rst) => {
                            var progressBarId = 'progressBar_' + fieldValues[i].innerHTML;
                            var progressBar = document.getElementById(progressBarId);
                            progressBar.value = rst.progress;
                            var runTimeId = 'run_time_' + fieldValues[i].innerHTML;
                            var runTime = document.getElementById(runTimeId);
                            runTime.textContent = rst.run_time;
                        },
                    });
            }
            var uiDropdown = document.getElementById('uiDropdown');
            var uiDropdownMenu = document.getElementById('uiDropdownMenu');
            function showUIDropdown() {
                uiDropdownMenu.style.display = 'block';
            }
            function hideUIDropdown() {
                uiDropdownMenu.style.display = 'none';
            }
            uiDropdown.addEventListener('mouseover', showUIDropdown);
            uiDropdown.addEventListener('mouseout', hideUIDropdown);
        };
        function runActions(e,tips="运行成功"){
            run(e)
        }

    </script>
</head>
<body>
    <div class="row" >
        <div class="col-sm">
            <ul class="nav nav-pills nav-pills-success nav-pills-square nav-light bg-white pa-15 fixed-top">
                <li class="nav-item">
                    <a href={% url 'product' %} class="nav-link"> 产品管理 </a>
                </li>
                <li class="nav-item">
                    <a href={% url 'apitestcase' %} class="nav-link"> 接口用例 </a>
                </li>
                <li class="nav-item">
                    <a href={% url 'apitestplan' %} class="nav-link active"> 测试计划 </a>
                </li>
                <li class="nav-item">
                    <a href={% url 'apireport' %} class="nav-link"> 测试报告 </a>
                </li>
                <li class="nav-item">
                    <a href={% url 'apiperformance' %} class="nav-link"> 性能测试 </a>
                </li>
                <li class="nav-item dropdown" id="uiDropdown">
                <a id="uitest" class="nav-link"> UI测试 </a>
                <ul class="dropdown-menu" id="uiDropdownMenu">
                    <li><a href={% url 'apptestcase' %} class="nav-link"> AppUI测试 </a></li>
                    <li><a href={% url 'webtestcase' %} class="nav-link"> WebUI测试 </a></li>
                </ul>
                </li>
                <li class="nav-item">
                    <a href={% url 'parasettings' %} class="nav-link"> 系统设置 </a>
                </li>
                <li class="nav-item">
                    <a href={% url 'user' %} class="nav-link "> 用户管理 </a>
                </li>
                <li class="nav-item" id="cur_product" style="margin-left: 200px">
                    <select id="select-option" name="setInput"  onchange="saveOption()">
                        <option>{{ product_name }}</option>
                        {% for product in product_alls %}
                        <option>
                        {% if product.product_name == product_name %}
                            {{ product.product_name }} ✓
                        {% else %}
                            {{ product.product_name }}
                       {% endif %}
                       </option>
                       {% endfor %}
                    </select>
                </li>
                <li class="nav-item dropdown-user" id="navUser">
                    <a href="#" class="nav-link" id="userName" style="font-size: 13px"></a>
                <ul class="dropdown-menu" id="userDropdownMenu">
                    <li> <a href="https://docs.qq.com/doc/DSVNlZ0xoUWpHYlpx?u=2f0ea49eb4e247f5b3c604c3d58ef026" class="nav-link" style="font-size: 13px" target="_black">使用手册</a></li>
                    <li><a class="nav-link" onclick="logout()" style="font-size: 12px"> 退出 </a></li>
                </ul>
                </li>
            </ul>
        </div>
    </div>

    <div id="outterDiv" class="hk-wrapper screenHeight">
        <div class="container" style="padding: 13px 20px; max-width: 1800px;">
        <div class="row">
        <div class="col-md-12">
            <div class="panel panel-primary">
                <div class="panel-body">
                    <div class="form-group">
                        <div class="row">
                            <form method="get" action="/autotest/apitestplan/search/">
                                <div class="col-md-4">
                                    <div class="input-group">
                                        <span style="font-size: 12px;height: 35px" class="input-group-addon">测试计划名称</span>
                                        <input type="text" style="font-size: 12px;height: 35px" class="form-control" id="key_words_suit" name="key_words_suit" autocomplete="off">
                                    </div>
                                </div>
                                <div class="col-md-4">
                                    <div class="input-group">
                                        <span style="font-size: 12px;height: 35px" class="input-group-addon">包含接口</span>
                                        <input type="text" style="font-size: 12px;height: 35px" class="form-control" id="key_words_name" name="key_words_name" autocomplete="off">
                                    </div>
                                </div>
                                <div class="col-md-2">
                                    <button class="btn btn-primary" style="margin-left: 15%" type="submit">查询</button>
                                    <button type="button" class="btn btn-primary" style="margin-left: 20px" data-toggle="modal" data-target="#add_window">添加</button>
                                 </div>
                            </form>
                        </div>
                    </div>
                    <div class="table-responsive">
                        <table class="table table-hover">
                            <thead>
                            <tr>
                                <th style="text-align: left;;font-size: 12px;height: 35px;font-weight: bold;display: none"><input type="checkbox" id="checkrev"></th>
                                <th style="text-align: left;font-size: 12px;height: 35px;font-weight: bold;display: none">#</th>
                                <th style="text-align: left;font-size: 12px;height: 35px;font-weight: bold">ID</th>
                                <th style="text-align: left;font-size: 12px;height: 35px;font-weight: bold">测试计划名称</th>
                                <th style="text-align: left;font-size: 12px;height: 35px;font-weight: bold;display: none">测试环境</th>
                                <th style="text-align: left;font-size: 12px;height: 35px;font-weight: bold">包含接口</th>
                                <th style="text-align: left;font-size: 12px;height: 35px;font-weight: bold">定时设置</th>
                                <th style="text-align: left;font-size: 12px;height: 35px;font-weight: bold">创建人</th>
                                <th style="text-align: left;font-size: 12px;height: 35px;font-weight: bold">产品</th>
                                <th style="text-align: left;font-size: 12px;height: 35px;font-weight: bold">执行进度</th>
                                <th style="text-align: left;font-size: 12px;height: 35px;font-weight: bold">最近1次执行时间</th>
                                <th style="text-align: left;font-size: 12px;height: 35px;font-weight: bold">操作</th>
                            </tr>
                            </thead>
                            <tbody id="tbody">
                            {% for rec in page_list %}
                                <tr>
                                    <td style="width: 30px;text-align: left;display: none"><input type="checkbox" name="check1" value="{{ forloop.counter }}"></td>
                                    <td style="width: 70px;white-space: normal;text-align: left;display: none">{{ rec.orders }}</td>
                                    <td style="width: 50px;text-align: left;" name="ids" id="ids">{{ rec.id }}</td>
                                    <td style="width: 130px;font-size: 12px">{{ rec.suit_name }}</td>
                                    <td style="width: 90px;font-size: 12px;display: none">{{ rec.url_host }}</td>
                                    <td style="max-width: 200px;white-space:normal;font-size: 12px">{{ rec.interface_name_display | truncatechars:"24" }}</td>
                                    <td style="width:110px;text-align: left;font-size: 12px">{{ rec.task_id }}</td>
                                    <td style="width:70px;text-align: left;font-size: 12px">{{ rec.charger }}</td>
                                    <td style="width:100px;text-align: left;font-size: 12px">{{ rec.product_id }}</td>
                                    <td style="width:50px;text-align: left;font-size: 12px"><progress id="progressBar_{{ rec.id }}" value="0" max="{{ rec.interface_num }}"></progress></td>
                                    <td style="width:130px;text-align: left;font-size: 12px" name="run_time" id="run_time_{{ rec.id }}"></td>
                                    <td id="operations" style="width: 160px;text-align: left;">
                                        <div class="btn-group btn-group-xs">
                                            <button id="startButton_{{ rec.id }}" type="button" class="btn btn-success" style="font-size: 12px" data-toggle="modal"
                                                    data-whatever="{{ rec.id }}"  data-fieldvalues="{{ rec.id }}"  onclick="runActions(this)">执行
                                            </button>
                                            <button type="button" class="btn btn-primary" data-toggle="modal"
                                                    data-target="" data-whatever="{{ rec.suit_name }}" style="margin-left: 5px;font-size: 12px"
                                                    onclick="show_edit_testplan(this)">编辑
                                            </button>
                                            <button type="button" class="btn btn-danger" style="margin-left: 5px;font-size: 12px" data-toggle="modal"
                                                    data-target="#del_window" data-whatever="{{ rec.suit_name }}_{{ rec.id }}">删除
                                            </button>
                                        </div>
                                    </td>
                                    <td style="width: 50px;text-align: center;display: none" id="interface_ids">{{ rec.id }}</td>
                                </tr>
                            {% endfor %}
                            </tbody>
                        </table>
                    </div>
                    <div class="container" style="margin-left: 400px">
                        <ul class="pagination" id="pager">
                            {% if page_list.has_previous %}
                                <li class="current"><a href="?page=1">首页</a></li>
                                <li class="previous"><a href="?page={{ page_list.previous_page_number }}">上一页</a></li>
                            {% else %}
                                <li class="previous disabled"><a href="#">上一页</a></li>
                            {% endif %}
                            {% if page_list.has_next %}
                                <li class="next"><a href="?page={{ page_list.next_page_number }}">下一页</a></li>
                                <li class="current"><a href="?page={{  page_list.paginator.num_pages }}">尾页</a></li>
                            {% else %}
                                <li class="next disabled"><a href="#">下一页</a></li>
                            {% endif %}
                            <input type="text" class="form-control" id="page-input" name="page-input" placeholder="输入页码" autocomplete="off" style="display: inline-block;width: 90px">
                            <a href="#" class="#" onclick="jumpToPage()"><span class="badge badge-primary " style="width: 60px;height:30px;font-size: 16px">跳转</span></a>
                            <li><span class="current">第 {{ page_list.number }} / {{ page_list.paginator.num_pages }}页</span></li>
                          </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade" id="add_window" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">
    <div class="modal-dialog" role="document" style="width: 1000px">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                        aria-hidden="true">×</span></button>
                <h4 class="modal-title" id="exampleModalLabel">添加测试计划</h4>
            </div>
            <div class="modal-body">
                <div class="row">
                    <div class="col-md-5">
                        <div class="form-group">
                            <div class="row">
                                <div class="col-md-11">
                                    <div class="input-group">
                                        <span class="input-group-addon">计划名称</span>
                                        <input id="add_name" type="text" class="form-control" value="">
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="row">
                                <div class="col-md-11">
                                    <div class="input-group">
                                        <span class="input-group-addon">测试环境</span>
                                        <select class="selectpicker form-control" id="add_url_host" name="add_url_host">
                                        {% for  env_para  in env_paras %}
                                                <option>{ {{env_para.keywords}} }</option>
                                        {% endfor %}
                                         </select>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="row">
                                <div class="col-md-11">
                                    <div class="input-group">
                                        <span class="input-group-addon">定时时间</span>
                                         <input id="add_run_time" name="add_run_time"  class="form-control" placeholder="">
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="form-group" style="display: none">
                            <div class="row">
                                <div class="col-md-11">
                                    <div class="input-group">
                                        <span class="input-group-addon">定时频率</span>
                                        <select class="selectpicker form-control" id="add_run_interval" name="add_run_interval">
                                        <option></option>
                                        {% for  interval  in intervals %}
                                             {% if interval.period == "minutes" %}
                                                <option>每分钟{{ interval.every }}次</option>
                                             {% elif interval.period == "hours" %}
                                                <option>每小时{{ interval.every }}次</option>
                                             {% elif interval.period == "days" %}
                                                <option>每天{{ interval.every }}次</option>
                                             {% endif %}
                                        {% endfor %}
                                         </select>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <h5>
                            <span style="margin-left: 10px;font-size:12px;display: none">* 注意：定时时间 和 定时频率 只能设置其中一种 !</span>
                        </h5>
                        <div class="form-group" style="display: none">
                            <div class="row">
                                <div class="col-md-11">
                                    <div class="input-group">
                                        <span class="input-group-addon">产品</span>
                                         <select class="selectpicker form-control" id='add_product_id' name="add_product_id">
                                         {% for  product  in product_alls %}
                                                <option> {{product.product_name}} </option>
                                         {% endfor %}
                                         </select>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="col-md-7">
                        <div class="table-responsive">
                            <table class="table table-bordered" id="add_interface_table">
                                <thead>
                                <tr>
                                    <th style="text-align: center">接口列表</th>
                                    <th id="add_select_interface" style="text-align: center">批量选择接口</th>
                                    <th style="text-align: center;display: none">添加行</th>
                                    <th style="text-align: center;display: none">删除行</th>
                                </tr>
                                </thead>
                                <tbody id="tbody_interface">
                                <tr>
                                    <td style="white-space: normal;text-align: center;" class="interface_name"></td>
                                    <td style="width: 80px;text-align: center;">
                                        <button class="btn btn-primary" data-toggle="modal" data-whatever="添加" data-target="#select_interface_window">选择</button>
                                    </td>
                                    <td style="width: 70px;text-align: center;display: none">
                                         <button class="btn btn-success " style="width: 40px; margin-left: 10px;" onclick="add_row(this)"> + </button>
                                    </td>
                                    <td style="width: 70px;text-align: center;display: none">
                                        <button class="btn btn-danger " style="width: 40px; margin-left: 10px;" onclick="del_row(this)"> - </button>
                                    </td>
                                </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-info" onclick="reset_testplan()">重选</button>
                <button type="button" class="btn btn-primary" onclick="add_testplan()">保存</button>
            </div>
        </div>
      </div>
    </div>

    <div class="modal fade" id="select_interface_window" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" style="height: 920px;margin-top: -25px;z-index: 9999">
        <div class="modal-dialog" role="document" style="width: 1100px">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
                    <h4 class="modal-title" id="exampleModalLabel">添加接口</h4>
                </div>
                <div class="modal-body">

                    <table id="blocks" class="table table-hover" style="font-size: 12px">
                        <thead>
                        <tr>
                            <th style="text-align: center"><div id="checkboxContainer"></div></th>
                            <th style="text-align: center;display: none">编号</th>
                            <th style="text-align: center;display: none">产品</th>
                            <th style="text-align: center;display: none">ID</th>
                            <th style="text-align: left">接口名称</th>
                            <th style="text-align: left">URL</th>
                            <th style="text-align: left">创建人</th>
                            <th style="text-align: center;display: none">操作</th>
                        </tr>
                        </thead>
                        <tbody id="tbody">

                         {% for rec in interfaces_all %}

                            <tr>
                                <td style="white-space: nowrap;text-align: center;"><input type="checkbox" name="check" onclick="checkPage(this)"></td>
                                <td style="width: 50px;white-space: normal;text-align: center;display: none">{{ forloop.counter }}</td>
                                <td style="width: 60px;white-space: nowrap;text-align: center;overflow: hidden;display: none">{{ rec.product_id }}</td>
                                <td style="width: 50px;text-align: center;display: none" id="ids">{{ rec.id }}</td>
                                <td style="width: 400px;">{{ rec.name }}</td>
                                <td style="max-width: 300px;white-space: nowrap;overflow: hidden">{{ rec.url }}</td>
                                <td style="max-width: 300px;white-space: nowrap;overflow: hidden">{{ rec.charger }}</td>
                                <td style="width: 300px;text-align: center;display: none">
                                    <button type="button" class="btn btn-primary" style="display: none" data-dismiss="modal" onclick="select_suit_interfaces(this)">选择</button>
                                </td>
                            </tr>
                         {% endfor %}
                        </tbody>
                       </table>
                    <div id="pagiDiv" align="right" style="text-align:center;margin-top: -20px">
                        <span id="spanFirst">首页</span>&nbsp;&nbsp;
                        <span id="spanPre">上一页</span>&nbsp;&nbsp;
                        <span id="spanNext">下一页</span>&nbsp;&nbsp;
                        <span id="spanLast">末页</span>&nbsp;&nbsp;
                        第&nbsp;<span id="spanPageNum"></span>&nbsp;/&nbsp;<span id="spanTotalPage"></span>&nbsp;页
                    </div>
                    <div class="modal-footer">
                         <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                         <button type="button" class="btn btn-primary" data-dismiss="modal" onclick="multipleAdd(this)">选择</button>
                    </div>
                </div>
            </div>
        </div>
    </div>


    <div class="modal fade" id="edit_select_interface_window" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" style="height: 920px;margin-top: -25px;z-index: 9999">
        <div class="modal-dialog" role="document" style="width: 1100px">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
                    <h4 class="modal-title" id="exampleModalLabel">添加接口</h4>
                </div>
                <div class="modal-body">

                    <table id="blocks1" class="table table-hover" style="font-size: 12px">
                        <thead>
                        <tr>
                            <th style="text-align: center">编号</th>
                            <th style="text-align: center">产品</th>
                            <th style="text-align: center;display: none">ID</th>
                            <th style="text-align: center">接口名称</th>
                            <th style="text-align: center">URL</th>
                            <th style="text-align: center;">操作</th>
                        </tr>
                        </thead>
                        <tbody id="tbody">

                         {% for rec in interfaces_all %}

                            <tr>
                                <td style="width: 50px;white-space: normal;text-align: center;">{{ forloop.counter }}</td>
                                <td style="width: 60px;white-space: nowrap;text-align: center;overflow: hidden">{{ rec.product_id }}</td>
                                <td style="width: 50px;text-align: center;display: none" id="ids">{{ rec.id }}</td>
                                <td style="width: 400px;">{{ rec.name }}</td>
                                <td style="max-width: 300px;white-space: nowrap;overflow: hidden">{{ rec.url }}</td>
                                <td style="width: 300px;text-align: center;">
                                    <button type="button" class="btn btn-primary" data-dismiss="modal" onclick="select_suit_interfaces(this)">选择</button>
                                </td>
                            </tr>
                         {% endfor %}
                        </tbody>
                       </table>
                    <div id="pagiDiv1" align="right" style="text-align:center;margin-top: -20px">
                        <span id="spanFirst1">首页</span>&nbsp;&nbsp;
                        <span id="spanPre1">上一页</span>&nbsp;&nbsp;
                        <span id="spanNext1">下一页</span>&nbsp;&nbsp;
                        <span id="spanLast1">末页</span>&nbsp;&nbsp;
                        第&nbsp;<span id="spanPageNum1"></span>&nbsp;/&nbsp;<span id="spanTotalPage1"></span>&nbsp;页
                    </div>
                    <div class="modal-footer" style="display: none">
                         <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                         <button type="button" class="btn btn-primary" data-dismiss="modal" onclick="multipleAdd(this)">选择</button>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade" id="edit_window" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">
    <div class="modal-dialog" role="document" style="width: 1260px;z-index: 0">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                        aria-hidden="true">×</span></button>
                <h4 class="modal-title" id="exampleModalLabel">编辑测试计划</h4>
            </div>
            <div class="modal-body">
                <div class="row">
                    <div class="col-md-7">
                        <h5>
                            <button type="button" class="btn btn-primary btn-sm" style="width: 80px" onclick="start_interface_testplan(this)">勾选调试</button>
                        </h5>
                        <div class="table-responsive">
                            <table class="table table-bordered" id="add_interface_table1">
                                <thead>
                                <tr>
                                    <th style="text-align: left;"><div id="checkboxEditPage"></div></th>
                                    <th style="text-align: left">#</th>
                                    <th style="text-align: left;display: none">ID</th>
                                    <th style="text-align: left;display: none">ID1</th>
                                    <th style="text-align: left">接口列表<span style="font-size: 13px;color: #51a351">（注意选择的顺序）</span></th>
                                    <th style="text-align: left;">状态</th>
                                    <th style="text-align: left">更新接口</th>
                                    <th style="text-align: left">单选接口</th>
                                    <th style="text-align: left">增行</th>
                                    <th style="text-align: left">减行</th>
                                </tr>
                                </thead>
                                <tbody id="tbody_interface1" class="tbody_interface1">
                                <tr>
                                    <td style="white-space: nowrap;text-align: left;"><input type="checkbox" name="chk" onclick="checkEditPage(this)" checked></td>
                                    <td style="width: 30px;white-space: normal;text-align: left;">{{ forloop.counter }}</td>
                                    <td style="white-space: normal;text-align: left;overflow: hidden;display: none"
                                        class="suit_interface_id"></td>
                                    <td style="white-space: normal;text-align: left;overflow: hidden;display: none"
                                        class="suit_interface_id1"></td>
                                    <td style="white-space: normal;text-align: left;overflow: hidden;"
                                        class="interface_name1"></td>
                                    <td style="font-size: 12px;text-align: left;" class="ex_status"></td>
                                    <td style="width: 80px;white-space: nowrap;overflow: hidden;text-align: left; display: flex; justify-content: center;">
                                        <button class="btn btn-primary" style="font-size: 12px;width: 40px;height: 24px;padding-left: 6px;line-height: 10px;" data-toggle="modal" data-target="" onclick="update_testplan_interface(this)">更新</button>
                                    </td>
                                    <td style="width: 80px;text-align: left;">
                                        <button style="font-size: 12px;width: 40px;height: 24px;padding-left: 6px;line-height: 10px;" class="btn btn-primary" data-toggle="modal" data-whatever="编辑"
                                           data-target="#edit_select_interface_window">选择</button>
                                    </td>
                                    <td style="width: 40px;text-align: left;">
                                        <button class="btn btn-success " style="width: 30px; height: 15px;padding-left: 9px;line-height: 0px;" onclick="add_row_edit(this)"> + </button>
                                    </td>
                                    <td style="width: 40px;text-align: left;">
                                        <button class="btn btn-danger " style="width: 30px; height: 15px;padding-left: 9px;line-height: 0px;" onclick="del_row_edit(this)"> - </button>
                                    </td>
                                </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                    <div class="col-md-5">
                        <div class="form-group" style="margin: 10px">
                            <div class="row">
                                <div class="col-md-11">
                                    <div class="input-group">
                                        <span class="input-group-addon">计划名称</span>
                                        <input id="edit_name" type="text" class="form-control" value="" required>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="form-group" style="margin: 10px">
                            <div class="row">
                                <div class="col-md-11">
                                    <div class="input-group">
                                        <span class="input-group-addon">测试环境</span>
                                        <select class="selectpicker form-control" id="edit_url_host" name="edit_url_host" required>
                                        {% for  env_para  in env_paras %}
                                                <option>{ {{env_para.keywords}} }</option>
                                        {% endfor %}
                                         </select>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="form-group" style="margin: 10px">
                            <div class="row">
                                <div class="col-md-11">
                                    <div class="input-group">
                                        <span class="input-group-addon">定时时间</span>
                                        <input id="edit_run_time" name="edit_run_time"  class="form-control" placeholder="">
                                    </div>
                                </div>
                            </div>
                        </div>
                       <div class="form-group" style="margin: 10px;display: none">
                            <div class="row">
                                <div class="col-md-11">
                                    <div class="input-group">
                                        <span class="input-group-addon">定时频率</span>
                                        <select class="selectpicker form-control" id="edit_run_interval" name="edit_run_interval">
                                        <option></option>
                                        {% for  interval  in intervals %}
                                             {% if interval.period == "minutes" %}
                                                <option>每分钟{{ interval.every }}次</option>
                                             {% elif interval.period == "hours" %}
                                                <option>每小时{{ interval.every }}次</option>
                                             {% elif interval.period == "days" %}
                                                <option>每天{{ interval.every }}次</option>
                                             {% endif %}
                                        {% endfor %}
                                         </select>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <h5>
                            <span style="margin-left: 10px;font-size:12px;display: none">* 注意：定时时间和定时频率只能设置其中一种 !</span>
                        </h5>
                        <div class="form-group" style="margin: 10px;display: none">
                            <div class="row">
                                <div class="col-md-11">
                                    <div class="input-group">
                                        <span class="input-group-addon">产品</span>
                                         <select class="selectpicker form-control" id='edit_product_id' name="edit_product_id" required>
                                         {% for  product  in product_alls %}
                                                <option> {{product.product_name}} </option>
                                         {% endfor %}
                                         </select>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="form-group" style="margin: 10px">
                            <div class="row">
                                <div class="col-md-11">
                                    <div class="panel panel-primary">
                                        <div class="panel-heading">
                                            <h3 class="panel-title">日志输出</h3>
                                        </div>
                                        <div class="panel-body" style="background:#000;">
                                            <textarea id="textarea" class="textarea1" style="background:#000; color:yellow;word-break: break-all"></textarea>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary" onclick="save_edit_testplan()">保存</button>
            </div>
        </div>
      </div>
    </div>

    <div class="modal fade" id="del_window" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-body">
                    <h1 class="modal-title" style="font-size: 20px;color:green;"></h1>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-primary" onclick="del_testplan(this)">确定</button>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade" id="edit_para_window" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">
        <div class="modal-dialog" role="document" style="width: 1100px">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
                    <h4 class="modal-title" id="exampleModalLabel">编辑接口</h4>
                    <h4 class="modal-title1" id="exampleModalLabel" style="display: none"></h4>
                    <h4 class="modal-title2" id="exampleModalLabel" style="display: none"></h4>
                </div>
                <div class="modal-body">
                    <iframe id="current3" class="current3" name='current3' src="" width="100%" height="400px" allowTransparency="true" style="background-color:transparent;border: 0;"></iframe>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    <button type="button" class="btn btn-primary" data-dismiss="modal" onclick="save_edit_testplan_para()">保存</button>
                </div>
            </div>
        </div>
    </div>

    </div>
    </div>

    </script>

    <script type="text/javascript">
        $('#del_window').on('show.bs.modal', function (event) {
            var button = $(event.relatedTarget);
            var recipient = button.data('whatever');
            console.log(recipient);
            var modal = $(this);
            modal.find('.modal-title').text('即将删除测试计划： ' + recipient);
            modal.find('.modal-body input').val(recipient)
        });
        function del_testplan(ele) {
            var id_interface = $('#del_window').find('.modal-title')[0].textContent;
            var id1 = id_interface.split("_")[1];
            console.log(id1);
            $.ajax({
                url: "/autotest/apitestplan/del/",
                data: JSON.stringify({
                    id1: id1,
                    csrfmiddlewaretoken: '{{ csrf_token }}'
                }),
                headers:{'X-CSRFToken': '{{ csrf_token }}'},
                contentType: 'application/json;charset=utf-8',
                type: "POST",
                traditional: true,
                success: function (result) {
                    window.location.reload(true);
                    console.log(result);
                },
                fail: function (result) {
                    debugger
                }
            });
        }

        $('#add_window').on('show.bs.modal', function (event) {
            var button = $(event.relatedTarget);
            $('#tbody_interface').empty();
            var tmp_append = '<tr>' +
                    '<td style="white-space: normal;text-align: left;" class="interface_name"></td>' +
                    '<td style="width: 120px;text-align: center;">' +
                    '<button class="btn btn-primary" data-toggle="modal" data-whatever="添加" data-target="#select_interface_window">选择</button>' +
                    '</td>' +
                    '<td style="width: 70px;text-align: left;display: none">' +
                    '<button class="btn btn-success " style="width: 40px; margin-left: 10px;" onclick="add_row(this)"> + </button>'+
                    '</td>' +
                    '<td style="width: 70px;text-align: left;display: none">' +
                    '<a disabled="disabled" onclick="del_row(this)"> -</a>' +
                    '</td>' +
                    '</tr>';
            $('#tbody_interface').append(tmp_append);
        });

        function reset_testplan(ele){
            $('#tbody_interface').empty();
            const add_select_interface_title = document.getElementById("add_select_interface")
            add_select_interface_title.style.display = ''
            var tmp_append = '<tr>' +
                    '<td style="white-space: normal;text-align: left;" class="interface_name"></td>' +
                    '<td style="width: 120px;text-align: center;">' +
                    '<button class="btn btn-primary" data-toggle="modal" data-whatever="添加" data-target="#select_interface_window">选择</button>' +
                    '</td>' +
                    '<td style="width: 70px;text-align: left;display: none">' +
                    '<a onclick="add_row(this)"> +</a>' +
                    '</td>' +
                    '<td style="width: 70px;text-align: left;display: none">' +
                    '<a disabled="disabled" onclick="del_row(this)"> -</a>' +
                    '</td>' +
                    '</tr>';
            $('#tbody_interface').append(tmp_append);
        }

        function add_testplan(ele) {
            var suit_list = [];
            var add_name = $('#add_name')[0].value;
            var add_url_host = $('#add_url_host')[0].value;
            var userObj = JSON.parse(localStorage.getItem('user'));
            var add_creator = userObj.userName;
            var add_product_id = $('#add_product_id')[0].value;
            var add_run_time = $('#add_run_time')[0].value;
            var add_run_interval =  $('#add_run_interval')[0].value;
            var interface_names = [];
            var tmp = document.getElementsByClassName("interface_name");
            for (var i = 0; i < tmp.length; i++) {
                interface_names.push(tmp[i].textContent);
            }
            suit_list.push(add_name,add_url_host,add_creator, interface_names, add_product_id,add_run_time,add_run_interval);
            console.log(suit_list);
            $.ajax({
                url: "/autotest/apitestplan/add/",
                data: JSON.stringify({
                    suit_list: suit_list,
                    csrfmiddlewaretoken: '{{ csrf_token }}'
                }),
                headers:{'X-CSRFToken': '{{ csrf_token }}'},
                contentType: 'application/json;charset=utf-8',
                type: "POST",
                traditional: true,
                success: function (result) {
                    window.location.reload(true);
                    console.log(result);
                },
                fail: function (result) {
                    debugger
                }
            });
        }

        $('#select_interface_window').on('show.bs.modal', function (event) {
            var button = $(event.relatedTarget);
            var row_num = $(event.relatedTarget).parent().parent()[0].rowIndex;
            var recipient = button.data('whatever');
            var modal = $(this);
            modal.find('.modal-title').text(recipient + '：选择接口_' + row_num);
        });

        $('#edit_select_interface_window').on('show.bs.modal', function (event) {
            var button = $(event.relatedTarget);
            var row_num = $(event.relatedTarget).parent().parent()[0].rowIndex;
            var recipient = button.data('whatever');
            var modal = $(this);
            modal.find('.modal-title').text(recipient + '：选择接口_' + row_num);
        });

        function add_row(ele) {
            var root = document.getElementById("tbody_interface");
            var row_num = $(ele).parent().parent()[0].rowIndex;
            var newRow = root.insertRow(row_num);
            var newCell0 = newRow.insertCell();
            var newCell1 = newRow.insertCell();
            var newCell2 = newRow.insertCell();
            var newCell3 = newRow.insertCell();
            newCell1.innerHTML = '<button class="btn btn-primary" data-toggle="modal" data-whatever="添加" data-target="#select_interface_window">选择</button>';
            newCell1.style = "width: 120px;text-align: center;";
            newCell0.innerHTML = '';
            newCell0.style = "white-space: normal;text-align: left;overflow: hidden;";
            newCell0.className = "interface_name";
            newCell2.innerHTML = '<a onclick="add_row(this)"> +</a>';
            newCell2.style = "width: 70px;text-align: left;";
            newCell3.innerHTML = '<a onclick="del_row(this)"> -</a>';
            newCell3.style = "width: 70px;text-align: left;";
        }

        function add_multi_row(ele) {
            var root = document.getElementById("tbody_interface");
            var row_num = $(ele).parent().parent()[0].rowIndex;
            var newRow = root.insertRow(row_num);
            var newCell0 = newRow.insertCell();
            var newCell1 = newRow.insertCell();
            var newCell2 = newRow.insertCell();
            var newCell3 = newRow.insertCell();
            newCell1.innerHTML = '<button class="btn btn-primary" data-toggle="modal" data-whatever="添加" data-target="#select_interface_window">选择</button>';
            newCell1.style = "width: 120px;text-align: center;";
            newCell0.innerHTML = '';
            newCell0.style = "white-space: normal;text-align: left;overflow: hidden;";
            newCell0.className = "interface_name";
            newCell2.innerHTML = '<button class="btn btn-primary " style="width: 40px; margin-left: 10px;" onclick="add_row(this)"> + </button>';
            newCell2.style = "width: 70px;text-align: left;";
            newCell3.innerHTML = '<button class="btn btn-danger " style="width: 40px; margin-left: 10px;" onclick="del_row(this)"> - </button>';
            newCell3.style = "width: 70px;text-align: left;";
        }

        function add_row_edit(ele) {
            var root = document.getElementById("tbody_interface1");
            var row_num = $(ele).parent().parent()[0].rowIndex;
            var newRow = root.insertRow(row_num);
            var newCell0 = newRow.insertCell();
            var newCell1 = newRow.insertCell();
            var newCell2 = newRow.insertCell();
            var newCell3 = newRow.insertCell();
            var newCell4 = newRow.insertCell();
            var newCell5 = newRow.insertCell();
            var newCell6 = newRow.insertCell();
            var newCell8 = newRow.insertCell();
            var newCell9 = newRow.insertCell();
            var newCell10 = newRow.insertCell();

            newCell0.innerHTML = '<input type="checkbox" name="chk" onclick="checkEditPage(this)" checked>';
            newCell0.style = "white-space: nowrap;text-align: center;";
            newCell1.innerHTML = 'new';
            newCell1.style = "width: 30px;white-space: normal;text-align: center;";
            newCell8.innerHTML = '<button style="font-size: 12px;width: 40px;height: 24px;padding-left: 6px;line-height: 10px;" class="btn btn-primary" data-toggle="modal" data-whatever="编辑" data-target="#edit_select_interface_window">选择</button>';
            newCell8.style = "width: 80px;text-align: center;";
            newCell3.innerHTML = '';
            newCell3.style = "white-space: normal;text-align: center;overflow: hidden;display: none";
            newCell3.className = "suit_interface_id";
            newCell4.innerHTML = '';
            newCell4.style = "white-space: normal;text-align: center;overflow: hidden;display: none";
            newCell4.className = "suit_interface_id1";
            newCell2.innerHTML = '';
            newCell2.style = "white-space: normal;text-align: center;overflow: hidden;";
            newCell2.className = "interface_name1";
            newCell6.innerHTML = '<a data-toggle="modal" data-target="" style="color: inherit;“ onclick=""></a>';
            newCell6.style = style = "width: 80px;white-space: nowrap;overflow: hidden;text-align: center;";
            newCell9.innerHTML = '<button class="btn btn-primary " style="width: 30px; height: 15px;padding-left: 9px;line-height: 0px;"" onclick="add_row_edit(this)"> + </button>';
            newCell9.style = "width: 40px;text-align: center;";
            newCell10.innerHTML = '<button class="btn btn-danger " style="width: 30px; height: 15px;padding-left: 9px;line-height: 0px;"" onclick="del_row_edit(this)"> - </button>';
            newCell10.style = "width: 40px;text-align: center;";
            newCell5.innerHTML = '';
            newCell5.style = "width: 70px;text-align: center;";
            newCell5.className = "ex_status";
        }

        function del_row(ele) {
            var root = document.getElementById("add_interface_table");
            var row_num = $(ele).parent().parent()[0].rowIndex;
            root.deleteRow(row_num);
        }

        function del_first_row(ele) {
            var root = document.getElementById("add_interface_table");
            root.deleteRow(1);
        }

        function del_last_row(ele) {
            var root = document.getElementById("add_interface_table");
            var totalRows = root.rows.length;
            var row_num = totalRows - 1
            root.deleteRow(row_num)
        }

        function set_no_select(ele){
            var root = document.getElementById("tbody_interface");
            var totalRows = root.rows.length;
            for (i=0;i<totalRows;i++){
                var cell1 = root.rows[i].cells[1];
                var cell2 = root.rows[i].cells[2];
                var cell3 = root.rows[i].cells[3];
                cell1.innerHTML = '<button class="btn btn-primary" data-toggle="modal" data-whatever="添加" style="color: inherit; pointer-events: none;" data-target="#select_interface_window">选择</button>';
                cell1.style = "width: 120px;text-align: center;display: none";
                cell2.innerHTML = '<a style="color: inherit; pointer-events: none;" onclick="add_row(this)"> +</a>';
                cell2.style = "width: 0px;text-align: center;display: none";
                cell3.innerHTML = '<a style="color: inherit; pointer-events: none;" onclick="del_row(this)"> -</a>';
                cell3.style = "width: 0px;text-align: center;display: none";
            }
            const add_select_interface_title = document.getElementById("add_select_interface")
            add_select_interface_title.style.display = 'none'
        }

        function del_row_edit(ele) {
            var root = document.getElementById("add_interface_table1");
            var row_num = $(ele).parent().parent()[0].rowIndex;
            var id2 = $(ele).parent().parent().find('td')[3].textContent;
            var id3 = $(ele).parent().parent().find('td')[4].textContent;
            if (id2 == '' && id3 == '') {
                del_id = ''
            }
            else if (id2 != '') {
                del_id = id2
            }
            else if (id3 != '') {
                del_id = id3
            }
            $.ajax({
                url: "/autotest/apitestplan/del_row_edit/",
                data: JSON.stringify({
                    del_id: del_id,
                    csrfmiddlewaretoken: '{{ csrf_token }}'
                }),
                headers:{'X-CSRFToken': '{{ csrf_token }}'},
                contentType: 'application/json;charset=utf-8',
                type: "POST",
                traditional: true,
                success: function (result) {
                    root.deleteRow(row_num);
                },
                fail: function (result) {
                    debugger
                }
            });
        }

        function show_edit_testplan(ele) {
            $('.textarea1').empty();
            var id1 = $(ele).parent().parent().parent().find('td')[2].textContent;
            var suit_name1 = $(ele).parent().parent().parent().find('td')[3].textContent;
            console.log([id1, suit_name1]);
            $.ajax({
                url: "/autotest/apitestplan/show_edit_testplan/",
                data: JSON.stringify({
                    id1: id1,
                    suit_name1: suit_name1,
                    csrfmiddlewaretoken: '{{ csrf_token }}'
                }),
                headers:{'X-CSRFToken': '{{ csrf_token }}'},
                contentType: 'application/json;charset=utf-8',
                type: "POST",
                traditional: true,
                success: function (result) {
                    $('#edit_window').find('.modal-title').text('编辑测试计划：' + id1 + '_' + suit_name1);
                    $('#edit_window').find('#edit_name').val(result['suit_name']);
                    $('#edit_window').find('#edit_url_host').val(result['url_host']);
                    $('#edit_window').find('#edit_run_interval').val(result['run_interval']);
                    $('#edit_window').find('#edit_run_time').val(result['run_time']);
                    $('#edit_window').find('#edit_product_id').val(result['product_id']);
                    $('#tbody_interface1').empty();
                    var interface_names = result['interface_name'].split(',');
                    var updates = result['update'].split(',');
                    var interface_ids = result['interface_id'].split(',');
                    for (var i = 0; i < interface_names.length; i++) {
                        if (updates[i]=='1'){
                                update_link = '<button class="btn btn-primary" style="font-size: 12px;width: 40px;height: 24px;padding-left: 6px;line-height: 10px;" id="update" onclick="update_testplan_interface(this)">更新</button>'
                            }
                            else {
                                update_link = '<a id="update" style="color: inherit;“ onclick=""></a>'
                        }
                        if (interface_names[i].substring(0, 18) == 'testplan_interface') {
                            var tmp_append = '<tr>' +
                                    '<td style="white-space: nowrap;text-align: center;"><input type="checkbox" name="chk" onclick="checkEditPage(this)" checked></td>' +
                                    '<td style="width: 30px;white-space: normal;text-align: center;">' + (parseInt(i)+1).toString() + '</td>' +
                                    '<td style="white-space: normal;text-align: center;overflow: hidden;display: none" class="suit_interface_id">' + result['id_list'][i] + '</td>' +
                                    '<td style="white-space: normal;text-align: center;overflow: hidden;display: none" class="suit_interface_id1">' + interface_ids[i] + '</td>' +
                                    '<td style="white-space: normal;text-align: center;overflow: hidden;" class="interface_name1">' + interface_names[i] + '</td>' +
                                    '<td style="width: 70px;text-align: center;" class="ex_status"></td>' +
                                    '<td style="width: 80px;white-space: nowrap;overflow: hidden;text-align: center;">' +update_link+ '</td>' +
                                    '<td style="width: 80px;text-align: center;">' +
                                    '<button class="btn btn-primary" data-toggle="modal" data-whatever="编辑" data-target="#edit_select_interface_window" style="font-size: 12px;width: 40px;height: 24px;padding-left: 6px;line-height: 10px;display: none">选择</button>' +
                                    '</td>' +
                                    '<td style="width: 40px;text-align: center;">' +
                                    '<button class="btn btn-primary " style="width: 30px; height: 15px;padding-left: 9px;line-height: 0px;" onclick="add_row_edit(this)"> + </button>' +
                                    '</td>' +
                                    '<td style="width: 40px;text-align: center;">' +
                                    '<button class="btn btn-danger " style="width: 30px; height: 15px;padding-left: 9px;line-height: 0px;" onclick="del_row_edit(this)"> - </button>' +
                                    '</td>' +
                                    '</tr>';
                        }
                        else {
                            tmp_append = '<tr>' +
                                    '<td style="white-space: nowrap;text-align: center;"><input type="checkbox" name="chk" onclick="checkEditPage(this)" checked></td>' +
                                    '<td style="width: 30px;white-space: normal;text-align: center;">' + (parseInt(i)+1).toString() + '</td>' +
                                    '<td style="white-space: normal;text-align: center;overflow: hidden;display: none" class="suit_interface_id"></td>' +
                                    '<td style="white-space: normal;text-align: center;overflow: hidden;display: none" class="suit_interface_id1"></td>' +
                                    '<td style="white-space: normal;text-align: center;overflow: hidden;" class="interface_name1">' + interface_names[i] + '</td>' +
                                    '<td style="width: 70px;text-align: center;" class="ex_status"></td>' +
                                    '<td style="width: 80px;white-space: nowrap;overflow: hidden;text-align: center;">' + update_link + '</td>' +
                                    '<td style="width: 80px;text-align: center;">' +
                                    '<button style="font-size: 12px;width: 40px;height: 24px;padding-left: 6px;line-height: 10px;" class="btn btn-primary" data-toggle="modal" data-whatever="编辑" data-target="#edit_select_interface_window">选择</button>' +
                                    '</td>' +
                                    '<td style="width: 40px;text-align: center;">' +
                                    '<button class="btn btn-primary " style="width: 30px; height: 15px;padding-left: 9px;line-height: 0px;" onclick="add_row_edit(this)"> + </button>' +
                                    '</td>' +
                                    '<td style="width: 40px;text-align: center;">' +
                                    '<button class="btn btn-danger " style="width: 30px; height: 15px;padding-left: 9px;line-height: 0px;" onclick="del_row_edit(this)"> - </button>' +
                                    '</td>' +
                                    '</tr>';
                        }
                        $('#tbody_interface1').append(tmp_append);
                    }
                    $('#edit_window').modal();
                },
                fail: function (result) {
                    debugger
                }
            });
        }

        function select_suit_interfaces(ele) {
            var table_name = $(ele).parent().parent().find('td')[1].textContent;
            var id1 = $(ele).parent().parent().find('td')[2].textContent;
            var name1 = $(ele).parent().parent().find('td')[3].textContent;
            var row_num_tmp = $('#edit_select_interface_window').find('.modal-title').text();
            var row_num = row_num_tmp.split('_')[1];
            row_num = parseInt(row_num) - 1;
            row_num = row_num.toString();
            console.log([table_name, id1, name1, row_num]);
            var head_line = $(ele).parent().parent().parent().parent().parent().parent().find('h4')[0].textContent;
            var flag = head_line.substring(0, 2);
            console.log(flag);
            if (flag == '添加') {
                var tmp = document.getElementsByClassName("interface_name");
            }
            else if (flag == '编辑') {
                tmp = document.getElementsByClassName("interface_name1");
            }
            var suit_interface_id = document.getElementsByClassName("suit_interface_id");
            var suit_interface_id1 = document.getElementsByClassName("suit_interface_id1");
            for (var i = 0; i < tmp.length; i++) {
                if (i == row_num) {
                    console.log([tmp[row_num],suit_interface_id[row_num],suit_interface_id1[row_num]]);
                    tmp[row_num].innerHTML = table_name + '_' + id1 + '_' + name1;
                    suit_interface_id[row_num].innerHTML = '';
                    suit_interface_id1[row_num].innerHTML = '';
                }
            }
        }

        function save_edit_testplan(ele) {
            var id_interface = $('#edit_window').find('.modal-title')[0].textContent;
            var id = id_interface.split("_")[0];
            id = id.split("：")[1];
            var edit_name = $('#edit_window').find('#edit_name')[0].value;
            var edit_url_host = $('#edit_window').find('#edit_url_host')[0].value;
            var edit_run_interval =$('#edit_window').find('#edit_run_interval')[0].value;
            var edit_run_time =$('#edit_window').find('#edit_run_time')[0].value;
            var edit_product_id = $('#edit_window').find('#edit_product_id')[0].value;
            var interface_name = [];
            var tmp = document.getElementsByClassName("interface_name1");
            for (var i = 0; i < tmp.length; i++) {
                interface_name.push(tmp[i].textContent);
            }
            var suit_info = [id, edit_name, edit_url_host, interface_name, edit_product_id,edit_run_interval,edit_run_time];
            console.log(suit_info);
            $.ajax({
                url: "/autotest/apitestplan/mod/",
                data: JSON.stringify({
                    suit_info: suit_info,
                    csrfmiddlewaretoken: '{{ csrf_token }}'
                }),
                headers:{'X-CSRFToken': '{{ csrf_token }}'},
                contentType: 'application/json;charset=utf-8',
                type: "POST",
                traditional: true,
                success: function (result) {
                    window.location.reload(true);
                    console.log(result);
                },
                fail: function (result) {
                    debugger
                }
            });
        }

        function update_testplan_interface(ele) {
            var id_interface = $('#edit_window').find('.modal-title')[0].textContent;
            var id = id_interface.split("_")[0];
            id = id.split("：")[1];
            var tmp = $(ele).parent().parent().find('td')[4].textContent;
            console.log(tmp);
            if (tmp.indexOf('testplan_interface') > -1) {
                var table_name = 'testplan_interface';
                var id1 = tmp.split('_')[2];
                var interface_name1 = tmp.split('_')[3];
            }
            else {
                table_name = tmp.split('_')[0];
                id1 = tmp.split('_')[1];
                interface_name1 = tmp.split('_')[2];
            }
            var id2 = $(ele).parent().parent().find('td')[2].textContent;
            var id3 = $(ele).parent().parent().find('td')[3].textContent;
            var root = document.getElementById("tbody_interface1");
            var updaterow = document.querySelectorAll("[id='update']");
            var row_num = $(ele).parent().parent()[0].rowIndex;
            var updatevalue =updaterow[row_num-1]
            console.log([id,table_name, id1, interface_name1, id2, id3, row_num]);

            var update_info =[id,table_name, id1, interface_name1, id2, id3, row_num]

            $.ajax({
                url: "/autotest/apitestplan/update/",
                data: JSON.stringify({
                    update_info: update_info,
                    csrfmiddlewaretoken: '{{ csrf_token }}'
                }),
                headers:{'X-CSRFToken': '{{ csrf_token }}'},
                contentType: 'application/json;charset=utf-8',
                type: "POST",
                traditional: true,
                success: function (result) {
                    $('#tbody_interface1').empty();
                    var interface_names = result['interface_name'].split(',');
                    var updates = result['update'].split(',');
                    var interface_ids = result['interface_id'].split(',');
                    var interface_exist = result['interface_exist']
                    for (var i = 0; i < interface_names.length; i++) {
                        if (updates[i]=='1'){
                                update_link = '<button class="btn btn-primary" style="font-size: 12px;width: 40px;height: 24px;padding-left: 6px;line-height: 10px;" id="update" onclick="update_testplan_interface(this)">更新</button>'
                            }
                            else {
                                update_link = '<a id="update" style="color: inherit;“ onclick=""></a>'
                        }
                        if (interface_names[i].substring(0, 18) == 'testplan_interface') {
                            var tmp_append = '<tr>' +
                                    '<td style="white-space: nowrap;text-align: center;"><input type="checkbox" name="chk" onclick="checkEditPage(this)" checked></td>' +
                                    '<td style="width: 30px;white-space: normal;text-align: center;">' + (parseInt(i)+1).toString() + '</td>' +
                                    '<td style="white-space: normal;text-align: center;overflow: hidden;display: none" class="suit_interface_id">' + result['id_list'][i] + '</td>' +
                                    '<td style="white-space: normal;text-align: center;overflow: hidden;display: none" class="suit_interface_id1">' + interface_ids[i] + '</td>' +
                                    '<td style="white-space: normal;text-align: center;overflow: hidden;" class="interface_name1">' + interface_names[i] + '</td>' +
                                    '<td style="width: 70px;text-align: center;" class="ex_status"></td>' +
                                    '<td style="width: 80px;white-space: nowrap;overflow: hidden;text-align: center;">' +update_link+ '</td>' +
                                    '<td style="width: 80px;text-align: center;">' +
                                    '<button class="btn btn-primary" data-toggle="modal" data-whatever="编辑" data-target="#edit_select_interface_window" style="font-size: 12px;width: 40px;height: 24px;padding-left: 6px;line-height: 10px;display: none">选择</button>' +
                                    '</td>' +
                                    '<td style="width: 40px;text-align: center;">' +
                                    '<button class="btn btn-primary" style="width: 30px; height: 15px;padding-left: 9px;line-height: 0px;" onclick="add_row_edit(this)"> + </button>' +
                                    '</td>' +
                                    '<td style="width: 40px;text-align: center;">' +
                                    '<button class="btn btn-danger " style="width: 30px; height: 15px;padding-left: 9px;line-height: 0px;" onclick="del_row_edit(this)"> - </button>' +
                                    '</td>' +
                                    '</tr>';
                        }
                        else {
                            tmp_append = '<tr>' +
                                    '<td style="white-space: nowrap;text-align: center;"><input type="checkbox" name="chk" onclick="checkEditPage(this)" checked></td>' +
                                    '<td style="width: 30px;white-space: normal;text-align: center;">' + (parseInt(i)+1).toString() + '</td>' +
                                    '<td style="white-space: normal;text-align: center;overflow: hidden;display: none" class="suit_interface_id"></td>' +
                                    '<td style="white-space: normal;text-align: center;overflow: hidden;display: none" class="suit_interface_id1"></td>' +
                                    '<td style="white-space: normal;text-align: center;overflow: hidden;" class="interface_name1">' + interface_names[i] + '</td>' +
                                    '<td style="width: 70px;text-align: center;" class="ex_status"></td>' +
                                    '<td style="width: 80px;white-space: nowrap;overflow: hidden;text-align: center;">' + update_link + '</td>' +
                                    '<td style="width: 80px;text-align: center;">' +
                                    '<button style="font-size: 12px;width: 40px;height: 24px;padding-left: 6px;line-height: 10px;" class="btn btn-primary" data-toggle="modal" data-whatever="编辑" data-target="#edit_select_interface_window">选择</button>' +
                                    '</td>' +
                                    '<td style="width: 40px;text-align: center;">' +
                                    '<button class="btn btn-primary" style="width: 30px; height: 15px;padding-left: 9px;line-height: 0px;" onclick="add_row_edit(this)"> + </button>' +
                                    '</td>' +
                                    '<td style="width: 40px;text-align: center;">' +
                                    '<button class="btn btn-danger" style="width: 30px; height: 15px;padding-left: 9px;line-height: 0px;" onclick="del_row_edit(this)"> - </button>' +
                                    '</td>' +
                                    '</tr>';
                        }
                        $('#tbody_interface1').append(tmp_append);
                    }
                    if(interface_exist=='1'){
                        setTimeout(alert('该接口已更新，已保存！'),1000)
                    }
                    else {
                        setTimeout(alert('原接口已被删除，请手动删除该接口！'),1000)
                    }

                },
                fail: function (result) {
                    debugger
                }
            });

        }

        var is_empty = true;
        var row_index;
        function start_interface_testplan(ele) {
            var obj = document.getElementsByName("chk");
            var chk_list = [];
            for(k in obj){
                if(obj[k].checked) {
                    row_num = $(obj[k]).parent().parent()[0].rowIndex;
                    chk_list.push(row_num-1);
                }
            }
            console.log(chk_list);
            if(is_empty == true) {
                row_index = 0;
                $('.textarea1').empty().append('测试开始，请稍等... \n');
                $('.ex_status').empty();
                is_empty = false;
            }
            var suit_head = $('#edit_window').find('.modal-title')[0].textContent;
            suit_head = suit_head.split("：")[1];
            var suit_id1 = suit_head.split("_")[0];
            var suit_name1 = suit_head.split("_")[1];
            console.log(suit_id1, suit_name1);
            var id_list = document.getElementsByClassName('suit_interface_id');
            var row_num = id_list.length;
            var cur_id = id_list[chk_list[row_index]].textContent;
            console.log(chk_list[row_index]+1,cur_id);
            if (cur_id =='') {
                console.log(row_index)
                var tmp = $(obj[chk_list[row_index]]).parent().parent().find('td')[2].textContent;
                console.log(tmp)
                cur_id= tmp.split('_')[1]
            }
            var j = 0;
            $('.ex_status').each(function () {
                if (j == chk_list[row_index]) {
                    $(this).append('加载中');
                    return false;
                }
                else {
                    j += 1;
                }
            });
            $.ajax({
                url: "/autotest/apitestplan/run/",
                data: JSON.stringify({
                    cur_id: cur_id,
                    row_index: row_index,
                    suit_id:suit_id1,
                    suit_name:suit_name1,
                    csrfmiddlewaretoken: '{{ csrf_token }}'
                }),
                headers:{'X-CSRFToken': '{{ csrf_token }}'},
                contentType: 'application/json',
                type: "POST",
                traditional: true,
                success: function (result) {
                    if (result.indexOf('Traceback') > -1) {
                        j = 0;
                        $('.ex_status').each(function () {
                            if (j == chk_list[row_index]) {
                                $(this).empty().append('程序异常');
                                return false;    //跳出循环
                            }
                            else {
                                j += 1;
                            }
                        });
                        $('.textarea1').append('\n发现程序bug，报错信息如下：\n\n');
                        $('.textarea1').append(result);
                        is_empty = true;
                        console.log(is_empty);
                    }
                    else {
                        if (result.indexOf('测试通过') > -1) {
                            j = 0;
                            $('.ex_status').each(function () {
                                if (j == chk_list[row_index]) {
                                    $(this).empty().append('测试通过');
                                    return false;
                                }
                                else {
                                    j += 1;
                                }
                            });
                            if (row_index < chk_list.length - 1) {
                                row_index += 1;
                                start_interface_testplan(ele)
                            }
                            else {
                                is_empty = true;
                                console.log(is_empty);
                                $('.textarea1').append('\n测试完成，最后一次执行结果：\n\n');
                                $('.textarea1').append(result);
                            }
                        }
                        else if (result.indexOf('测试失败') > -1) {
                            j = 0;
                            $('.ex_status').each(function () {
                                if (j == chk_list[row_index]) {
                                    $(this).empty().append('测试失败');
                                    return false;
                                }
                                else {
                                    j += 1;
                                }
                            });
                            is_empty = true;
                            console.log(is_empty);
                            $('.textarea1').append('\n测试完成，最后一次执行结果：\n\n');
                            $('.textarea1').append(result);
                        }
                    }
                },
                fail: function (result) {
                }
            });
        }


    function firstPage() {
        hide();
        currPageNum = 1;
        showCurrPage(currPageNum);
        showTotalPage();
        for (i = 1; i < pageCount + 1; i++) {
            blockTable.rows[i].style.display = "";
        }
        firstText();
        preText();
        nextLink();
        lastLink();
    }
    function prePage() {
        hide();
        currPageNum--;
        showCurrPage(currPageNum);
        showTotalPage();
        var firstR = firstRow(currPageNum);
        var lastR = lastRow(firstR);
        for (i = firstR; i < lastR; i++) {
            blockTable.rows[i].style.display = "";
        }
        if (1 == currPageNum) {
            firstText();
            preText();
            nextLink();
            lastLink();
        } else if (pageNum == currPageNum) {
            preLink();
            firstLink();
            nextText();
            lastText();
        } else {
            firstLink();
            preLink();
            nextLink();
            lastLink();
        }
    }
    function nextPage() {
        hide();
        currPageNum++;
        showCurrPage(currPageNum);
        showTotalPage();
        var firstR = firstRow(currPageNum);
        var lastR = lastRow(firstR);
        for (i = firstR; i < lastR; i++) {
            blockTable.rows[i].style.display = "";
        }
        if (1 == currPageNum) {
            firstText();
            preText();
            nextLink();
            lastLink();
        } else if (pageNum == currPageNum) {
            preLink();
            firstLink();
            nextText();
            lastText();
        } else {
            firstLink();
            preLink();
            nextLink();
            lastLink();
        }
    }
    function lastPage() {
        hide();
        currPageNum = pageNum;
        showCurrPage(currPageNum);
        showTotalPage();
        var firstR = firstRow(currPageNum);
        for (i = firstR; i < numCount + 1; i++) {
            blockTable.rows[i].style.display = "";
        }
        firstLink();
        preLink();
        nextText();
        lastText();
    }
    function firstRow(currPageNum) {
        return pageCount * (currPageNum - 1) + 1;
    }
    function lastRow(firstRow) {
        var lastRow = firstRow + pageCount;
        if (lastRow > numCount + 1) {
            lastRow = numCount + 1;
        }
        return lastRow;
    }
    function showCurrPage(cpn) {
        currPageSpan.innerHTML = cpn;
    }
    function showTotalPage() {
        pageNumSpan.innerHTML = pageNum;
    }
    function hide() {
        for (var i = 1; i < numCount + 1; i++) {
            blockTable.rows[i].style.display = "none";
        }
    }
    function firstLink() {
        firstSpan.innerHTML = "<a href='javascript:firstPage();'>首页</a>";
    }
    function firstText() {
        firstSpan.innerHTML = "首页";
    }
    function preLink() {
        preSpan.innerHTML = "<a href='javascript:prePage();'>上一页</a>";
    }
    function preText() {
        preSpan.innerHTML = "上一页";
    }
    function nextLink() {
        nextSpan.innerHTML = "<a href='javascript:nextPage();'>下一页</a>";
    }
    function nextText() {
        nextSpan.innerHTML = "下一页";
    }
    function lastLink() {
        lastSpan.innerHTML = "<a href='javascript:lastPage();'>末页</a>";
    }
    function lastText() {
        lastSpan.innerHTML = "末页";
    }

    function firstPage1() {
        hide1();
        currPageNum1 = 1;
        showCurrPage1(currPageNum1);
        showTotalPage1();
        for (i = 1; i < pageCount1 + 1; i++) {
            blockTable1.rows[i].style.display = "";
        }
        firstText1();
        preText1();
        nextLink1();
        lastLink1();
    }
    function prePage1() {
        hide1();
        currPageNum1--;
        showCurrPage1(currPageNum1);
        showTotalPage1();
        var firstR = firstRow1(currPageNum1);
        var lastR = lastRow1(firstR);
        for (i = firstR; i < lastR; i++) {
            blockTable1.rows[i].style.display = "";
        }
        if (1 == currPageNum1) {
            firstText1();
            preText1();
            nextLink1();
            lastLink1();
        } else if (pageNum1 == currPageNum1) {
            preLink1();
            firstLink1();
            nextText1();
            lastText1();
        } else {
            firstLink1();
            preLink1();
            nextLink1();
            lastLink1();
        }
    }
    function nextPage1() {
        hide1();
        currPageNum1++;
        showCurrPage1(currPageNum1);
        showTotalPage1();
        var firstR = firstRow1(currPageNum1);
        var lastR = lastRow1(firstR);
        for (i = firstR; i < lastR; i++) {
            blockTable1.rows[i].style.display = "";
        }
        if (1 == currPageNum1) {
            firstText1();
            preText1();
            nextLink1();
            lastLink1();
        } else if (pageNum1 == currPageNum1) {
            preLink1();
            firstLink1();
            nextText1();
            lastText1();
        } else {
            firstLink1();
            preLink1();
            nextLink1();
            lastLink1();
        }
    }
    function lastPage1() {
        hide1();
        currPageNum1 = pageNum1;
        showCurrPage1(currPageNum1);
        showTotalPage1();
        var firstR = firstRow1(currPageNum1);
        for (i = firstR; i < numCount1 + 1; i++) {
            blockTable1.rows[i].style.display = "";
        }
        firstLink1();
        preLink1();
        nextText1();
        lastText1();
    }
    function firstRow1(currPageNum1) {
        return pageCount1 * (currPageNum1 - 1) + 1;
    }
    function lastRow1(firstRow1) {
        var lastRow1 = firstRow1 + pageCount1;
        if (lastRow1 > numCount1 + 1) {
            lastRow1 = numCount1 + 1;
        }
        return lastRow1;
    }
    function showCurrPage1(cpn) {
        currPageSpan1.innerHTML = cpn;
    }
    function showTotalPage1() {
        pageNumSpan1.innerHTML = pageNum1;
    }
    function hide1() {
        for (var i = 1; i < numCount1 + 1; i++) {
            blockTable1.rows[i].style.display = "none";
        }
    }
    function firstLink1() {
        firstSpan1.innerHTML = "<a href='javascript:firstPage1();'>首页</a>";
    }
    function firstText1() {
        firstSpan1.innerHTML = "首页";
    }
    function preLink1() {
        preSpan1.innerHTML = "<a href='javascript:prePage1();'>上一页</a>";
    }
    function preText1() {
        preSpan1.innerHTML = "上一页";
    }
    function nextLink1() {
        nextSpan1.innerHTML = "<a href='javascript:nextPage1();'>下一页</a>";
    }
    function nextText1() {
        nextSpan1.innerHTML = "下一页";
    }
    function lastLink1() {
        lastSpan1.innerHTML = "<a href='javascript:lastPage1();'>末页</a>";
    }
    function lastText1() {
        lastSpan1.innerHTML = "末页";
    }
    </script>
</body>
</html>